<template>
  <view class="classify">
    <view class="ifys_box">
      <!-- 头部 -->
      <view class="headers" :style="{ paddingTop: menuButtonT + 'px' }">
        <view class="imgs" style="padding: 0 10px 0 20px">
          <image class="image1" mode="widthFix" src="http://cdn.jxsr.com/logox.png" />
        </view>
        <view class="inps" style="-webkit-flex: 1; flex: 1"
          :style="{ marginRight: customBarlef + customBarrig + 'px' }">
          <view class="inputs" @click="search">
            <image class="img" mode="widthFix" src="http://cdn.jxsr.com/search.png" />
            <view class="inp_vie">搜索</view>
          </view>
        </view>
      </view>



      <!-- 分类切换 -->
      <view class="switchover" :style="{ height: windowHeight + 'px' }">
        <view class="left">
          <block v-for="(item, index) in ifys" :key="index">
            <view class="Left_list" :class="{ active: ifyIndex === item.id }" @click="switchover(item)">{{
              item.cateName
            }}</view>
          </block>
        </view>
        <view class="right">
          <view class="scroll-view">

            <view class="drsj">当日商品时价</view>
            <!-- 商品列表 -->
            <view class="list_xx" v-for="item in lists" :key="item.id">
              <!-- <image :src="item.image" mode="scaleToFill" /> -->
              <view class="message">
                <view class="content">
                  <view class="txt">{{ item.name }}</view>
                  <view class="jg">
                    <span class="sp1">¥<span>{{ item.vipPrice }}</span>/{{ item.size ? item.size : '斤' }}</span>
                    <!-- <span class="sp2">时价</span> -->
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { queryAllTwo, querySpecialOffers } from '@/utils/api.js';
export default {
  data() {
    return {
      statursBarH: getApp().globalData.statursBarH,
      customBarH: getApp().globalData.customBarH,
      menuButtonT: getApp().globalData.menuButtonT,
      customBarlef: getApp().globalData.customBarlef,
      customBarrig: getApp().globalData.customBarrig,

      // 当前端
      memberData: 'mj',
      // 设置高度
      windowHeight: 0,
      // 搜索值
      value: '',
      // 分类
      ifyIndex: '',
      // 分类列表
      ifys: [],
      // 选择分类的数据
      lists: [],
      loadMoreText: '加载中...',
      showLoadMore: false,
    };
  },
  onInit() {
  },
  onShow: function () {
  },
  onLoad(e) {
    var _this = this;
    uni.getSystemInfo({
      success: function (res) {
        _this.windowHeight = res.windowHeight - 80;
      },
    });
    this.classIfy();
  },
  // 监听页面卸载
  onUnload() {
    this.lists = [];
  },
  methods: {
    toDetail({ id }) {
      uni.navigateTo({
        url: `/pages/goods/detail?id=${id}&sptype=ordinarysp`,
      });
    },
    // 获取分类列表
    classIfy() {
      // 获取分类
      queryAllTwo({})
        .then((res) => {
          if (res.code === 200) {
            this.ifys = res.data.categories;
            this.ifyIndex = this.ifys[0].id;
            this.getGoodsList();
          }
        })
        .catch((err) => {
          uni.showToast({ title: '网络繁忙', position: 'bottom', icon: 'none' });
        });
    },

    async getGoodsList() {
      let res = await querySpecialOffers({ cateId: this.ifyIndex, isBenefit: 0, });
      if (res.code == 200) {
        this.lists = res.data.products;
      }
    },

    // 进入搜索
    search() {
      uni.navigateTo({
        url: '../index/search/search',
      });
    },
    // 分类切换获取数据
    switchover(item) {
      this.ifyIndex = item.id;
      this.getGoodsList();
    },
    // 查看商户详情
  },
};
</script>
<style scoped lang="scss">
.drsj {
  width: 100%;
  text-align: center;
  font-size: 30rpx;
  line-height: 50rpx;
  font-weight: 800;
}

.classify {
  height: 100%;

  .ifys_box {
    height: 100%;

    // 头部
    .headers {
      // height: 50px;
      width: 100%;
      background-color: #ffffff;
      padding-bottom: 10px;
      // padding-top: 30px;
      display: flex;

      .imgs {
        display: flex;
        justify-content: center;
        align-items: center;

        .image1 {
          width: 78px;
          height: 20px;
        }

        .image2 {
          width: 33px;
          height: 30px;
        }
      }

      .inps {
        padding-right: 20px;
        display: flex;
        align-items: center;

        .inputs {
          width: 100%;
          height: 30px;
          border-radius: 46px;
          border: 1px solid $primaryTextColor;
          background-color: #fff;
          display: flex;
          align-items: center;

          .img {
            width: 15px;
            height: 16px;
            margin-left: 10px;
          }

          .inp_vie {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            margin-left: 10px;
          }

          // .uni-easyinput__placeholder-class{
          // 	font-size: 16px;
          // 	font-family: PingFangSC-Regular, PingFang SC;
          // 	font-weight: 400;
          // 	color: #999999;
          // }
          // .uni-input-input{
          // 	font-size: 16px;
          // 	font-family: PingFangSC-Regular, PingFang SC;
          // 	font-weight: 400;
          // }
        }
      }
    }

    // 分类切换
    .switchover {
      width: 100%;
      overflow: hidden;
      display: flex;

      .left {
        width: 180rpx;
        height: 100%;
        background: #ffffff;

        .Left_list {
          width: 100%;
          height: 50px;
          font-size: 15px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: $text;
          line-height: 50px;
          text-align: center;
        }

        .active {
          color: $primaryTextColor;
          background-color: #f5f5f5;
        }
      }

      .right {
        height: 100%;
        margin-left: 20rpx;

        .scroll-view {
          white-space: nowrap;
          overflow: hidden;

          width: 550rpx;
          height: 100%;

          .list_xx {
            width: 100%;
            height: 60px;
            box-sizing: border-box;
            padding-top: 20px;
            display: flex;

            .message {
              width: 550rpx;
              box-sizing: border-box;
              border-bottom: 1px solid #f5f5f5;
              display: flex;

              .content {
                width: 100%;
                height: 100%;

                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: flex-start;

                gap: 12rpx;

                .txt {
                  width: calc(70% - 12rpx);

                  font-size: 28rpx;
                  line-height: 40rpx;
                  min-height: 40rpx;

                  font-family: PingFangSC-Medium, PingFang SC;
                  color: $mainText;
                  font-weight: bold;

                  text-align: center;

                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 1;
                }

                .jg {
                  width: 30%;

                  .sp1 {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #ff0000;
                    line-height: 48rpx;

                    span {
                      font-size: 40rpx;
                      line-height: 48rpx;
                    }
                  }

                  .sp2 {
                    font-size: 20rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    line-height: 24rpx;
                    margin-left: 10rpx;
                  }
                }

                view {
                  width: 100%;
                  font-size: 13px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: $text;
                  line-height: 25px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                .dz {
                  font-size: 12px;
                  color: #999999;
                  margin-top: 5px;
                }
              }
            }
          }

          .list_bots {
            width: 100%;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: $mainText;
            line-height: 50px;
            text-align: center;
          }
        }

        ::-webkit-scrollbar {
          width: 0;
          height: 0;
          background-color: transparent;
        }
      }
    }

    // 客服
    .service {
      width: 110rpx;
      height: 110rpx;
      background: #e7f9ef;
      box-shadow: 0px 0px 8rpx 0px rgba(28, 158, 96, 0.5);
      border-radius: 56rpx;
      position: fixed;
      right: 40rpx;
      bottom: 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 68rpx;
        height: 56rpx;
      }
    }
  }
}
</style>
